import React, { Component } from 'react';

import { connect } from 'react-redux';

import { cartReduce, cartAdd } from '../../actions/cart'

@connect(null, { cartReduce, cartAdd })

export default class CartItem extends Component {
  render() {
    const {
      id,
      name,
      price,
      count,
      thumb
    } = this.props;
    return (
      <li className="wgd-cart-item">
        <div className="wgd-cart-item-img">
          <img src={thumb} alt={name}/>
        </div>
        <div className="wgd-cart-item-desc">
          <h2>{name}-{id}</h2>
          <div className="price">￥{price}</div>
          <div className="count">
            <span className="btn-reduce" onClick={this.props.cartReduce.bind(this,id)}>-</span>
            <span className="btn-counter">{count}</span>
            <span className="btn-add" onClick={this.props.cartAdd.bind(this,id)}>+</span>
          </div>
        </div>
      </li>
    )
  }
}
